import React, { useState } from 'react';
import { useModel, Link } from 'umi';
import {
  Space,
  Dropdown,
  Menu,
  Modal,
  Button
} from 'antd';
import {
  SettingOutlined,
  BellOutlined,
  NotificationOutlined,
  UploadOutlined,
} from '@ant-design/icons';
import Avatar from './AvatarDropdown';
import HeaderSearch from '@/components/HeaderSearch';
import styles from './index.less';

const exportTitles = {
  '0': '警告分类统计表导出',
  '1': '警告历史详情表导出'
}

const GlobalHeaderRight = (props) => {
  const [exportType, setExportType] = useState(0);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const { search = true } = props;
  const { initialState } = useModel('@@initialState');

  if (!initialState || !initialState.settings) {
    return null;
  }

  const { navTheme, layout } = initialState.settings;
  let className = styles.right;

  if ((navTheme === 'dark' && layout === 'top') || layout === 'mix') {
    className = `${styles.right}  ${styles.dark}`;
  }

  const handleExport = (type) => {
    setExportType(type)
    setIsModalVisible(true)
  }

  const menu = (
    <Menu>
      <Menu.Item onClick={() => {handleExport(0)}}>
        <span>警告分类统计表</span>
      </Menu.Item>
      <Menu.Item onClick={() => {handleExport(1)}}>
        <span>警告历史详情表</span>
      </Menu.Item>
    </Menu>
  );

  return (
    <div>
      <Space size="middle" className={className}>
        { search && <HeaderSearch /> }
        <Link to="/setting">
          <SettingOutlined />
        </Link>
        <Link to="/setting">
          <BellOutlined />
        </Link>
        <NotificationOutlined />
        <Dropdown
          trigger={['click']}
          overlay={menu}
        >
          <UploadOutlined />
        </Dropdown>
        <Avatar />
      </Space>
      <Modal
        title={exportTitles[exportType]}
        visible={isModalVisible}
      >
        well
      </Modal>
    </div>
  );
};

export default GlobalHeaderRight;
